<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ArticleApi, { ArticleDetailVo } from '@/api/article'
import { showInitDate } from '@/utils/server'
import { mavonEditor } from 'mavon-editor'

const router = useRouter()
const detailObj = ref<ArticleDetailVo>({})
const loading = ref(false)
const error = ref('')

const goBack = () => {
  router.back()
}

const initData = async () => {
  const { id } = useRoute().query
  if (!id) {
    error.value = '文章ID不能为空'
    return
  }

  try {
    loading.value = true
    const res = await ArticleApi.getArticleDetail(Number(id))
    if (res.success) {
      detailObj.value = res.item ?? {}
      if (detailObj.value.content) {
        const markdownIt = mavonEditor.getMarkdownIt()
        detailObj.value.content = markdownIt.render(detailObj.value.content)
      }
      await ArticleApi.updateArticleViewCount(Number(id))
    } else {
      error.value = '获取文章详情失败'
    }
  } catch (e) {
    console.error('获取文章详情出错:', e)
    error.value = '获取文章详情出错'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  initData()
})
</script>

<template>
  <div class="container py-4">
    <div v-if="loading" class="text-center">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">加载中...</span>
      </div>
    </div>

    <div v-else-if="error" class="alert alert-danger" role="alert">
      {{ error }}
    </div>

    <div v-else class="card shadow-sm">
      <div class="card-body position-relative">
        <!-- 文章标题和元信息 -->
        <header class="article-header mb-5 text-center">
          <!-- 返回按钮 -->
          <button class="btn btn-outline-primary back-btn" @click="goBack">
            <i class="fa fa-arrow-left me-1"></i>
            返回
          </button>

          <h1 class="display-4 mb-4">
            <router-link
              :to="`/DetailShare?aid=${detailObj.id}`"
              class="text-decoration-none text-dark article-title">
              {{ detailObj.title }}
            </router-link>
          </h1>

          <div
            class="d-flex align-items-center text-muted justify-content-center">
            <span class="me-4">
              <i class="fa fa-calendar" style="color: #2196f3"></i>
              发表于
              {{
                detailObj.createTime
                  ? showInitDate(detailObj.createTime, 'all')
                  : ''
              }}
            </span>
            <span class="me-4">
              <i class="fa fa-eye" style="color: #2196f3"></i>
              {{ +(detailObj.viewCount ?? 0) + 1 }} 次围观
            </span>
            <router-link
              :to="`/Share?classId=${detailObj.categoryId}`"
              class="badge bg-primary text-decoration-none">
              {{ detailObj.categoryName }}
            </router-link>
          </div>
        </header>

        <!-- 文章内容 -->
        <div
          class="article-content markdown-body text-center"
          v-html="detailObj.content"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.date-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 100px;
  background: #0d6efd;
  color: white;
  border-radius: 8px;
  padding: 0.5rem;
  text-align: center;

  .month {
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0.2rem;
  }

  .day {
    font-size: 1.8rem;
    font-weight: bold;
    padding-top: 0.2rem;
  }
}

.back-btn {
  position: absolute;
  left: 1rem;
  top: 1rem;
  transition: all 0.2s;

  &:hover {
    transform: translateX(-3px);
  }
}

.article-header {
  padding: 2rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;

  .article-title {
    font-weight: 700;
    transition: color 0.3s ease;

    &:hover {
      color: #0d6efd !important;
    }
  }
}

.article-content {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-top: 2rem;

  :deep(img) {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
  }

  :deep(h1),
  :deep(h2),
  :deep(h3),
  :deep(h4),
  :deep(h5),
  :deep(h6) {
    margin: 1.5rem 0 1rem;
    font-weight: 600;
  }

  :deep(pre) {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
  }

  :deep(blockquote) {
    border-left: 4px solid #0d6efd;
    padding-left: 1rem;
    color: #6c757d;
    margin: 1rem 0;
  }
}
</style>
